/**
 * Created by Heiliuer on 2019/4/7 0007.
 */
import React from 'react'
import './index.css'

class LineChart extends React.Component {

    constructor(...args) {
        super(...args)
        this.state = {
            key: String(Math.random()).split('.')[1] + Date.now()
        }
    }

    /**
     * @param xData x轴数据
     * @param yData y轴数据
     */
    initChart(props = this.props) {
        const {
            title = {},
            legend = {
                data: []
            },
            xAxis = {
                data: []
            },
            series = []
        } = props
        // 数据为空，则不初始化图表
        if (!series || !series.length) {
            return
        }

        const option = {
            title: {
                text: ''
            },
            tooltip: {},
            // legend: {
            //     data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
            // },
            radar: {
                // shape: 'circle',
                name: {
                    textStyle: {
                        color: '#fff',
                        backgroundColor: '#999',
                        borderRadius: 3,
                        padding: [3, 5]
                    }
                },
                indicator: [
                    {name: 'cpuPercent', max: 100},
                    {name: 'virtualMemoryPercent', max: 100},
                    {name: 'swapPercent', max: 100},
                    {name: 'networkSentBytes', max: 1024 * 1024 * 1024 * 100},
                    {name: 'diskReadBytes', max: 1024 * 1024 * 1024 * 100 * 100},
                    {name: 'networkRecvBytes', max: 1024 * 1024 * 1024 * 100},
                    {name: 'diskWriteBytes', max: 1024 * 1024 * 1024 * 100 * 100}
                ]
            },
            series: [{
                name: '',
                type: 'radar',
                // areaStyle: {normal: {}},
                data: [
                    {
                        value: series,
                        name: '实际性能曲线图'
                    }
                ]
            }]
        }
        const init = () => {
            this.chart = window.echarts.init(this.chartDom)
            this.chart.setOption(option)
        }
        // 图表实例未初始化，则初始化
        if (!this.chart) {
            init()
        } else {
            this.setState({
                key: String(Math.random()).split('.')[1] + Date.now()
            }, init)
        }
    }

    componentDidMount() {
        // 初始化图表
        this.initChart()
        window.addEventListener('resize', () => {
            if (this.chart) {
                this.chart.resize()
            }
        })
    }

    componentWillReceiveProps(nextProps, nextContext) {
        this.initChart(nextProps)
    }

    render() {
        const {className} = this.props
        return <div className="line-chart-wrapper">
            <div key={this.state.key} className={'line-chart ' + (className || '')}
                 ref={/*通过ref获取到组件的dom*/dom => this.chartDom = dom}></div>
        </div>
    }
}

export default LineChart